<template>
	<view class="navbar_footer">
		<view v-for="(item,index) in navbarList" :key="item.title" class="navigator" :class="{'curActive': item.isCheck}" @click="jumpRouter(index)">
			<i class="iconfont" :class="item.new_name" v-if="item.new_name"></i>
			<img class="picture" :src="item.src" alt="" v-else>
			<text>{{item.text}}</text>
		</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage.js'
	export default {
		props: ['tabIndex'],
		data() {
			return {
				navbarList: [],
				tempList: [
					{name: "wap-home-o",new_name: "icon-home",purl: "pages/index/index",text: "首页"},
					{name: "notes-o",new_name: "icon-fenlei",purl: "pages/cate/index",text: "分类"},
					{name: "cart-o",new_name: "icon-gouwuche",purl: "pages/cart/index",text: "购物车"},
					{name: "user-o",new_name: "icon-wode",purl: "pages/my/index",text: "我"},
				]
			}
		},
		onLoad(){
			
		},
		created(){
			uni.$on('triggerTabbar',() => this.init());
			this.init();
		},
		methods: {
			init(){	// 页面初始化
				this.navbarList = storage.get('tabbar') || this.tempList;
				this.navbarList.length > 0 && this.navbarList.forEach((v,i) => {
					this.navbarList[i]['isCheck'] = false;
					this.navbarList[this.tabIndex].isCheck = true;
					if (v.new_name == 'icon-daohangtubiao') {								
						this.navbarList.push(v);
						this.navbarList.splice(i,1);
					}
				})
			},
			jumpRouter(n){	// 跳转路由				
				this.navbarList.forEach(v => v.isCheck = false);
				this.navbarList[n].isCheck = true;	
				
				uni.redirectTo({ url: `/${this.navbarList[n].purl}` });			
			}
		}
	}
</script>

<style lang="scss" scoped>
.navbar_footer{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	border-top: 1px solid #ebedf0;
	width: 100%;
	height: 50px;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 100;
	.navigator{
		width: 25%;
		padding: 8px 0;
		text-align: center;
		.picture{
			display: block;
			width: 16px;
			height: 16px;
			margin: 0 auto;
		}
		.iconfont{
			display: block;
			font-size: 16px;
		}
		text{
			font-size: 13px;
		}
	}
	.curActive{
		color: #1989fa;
	}
	
}
</style>

